<template>
  <el-form
    ref="userForm"
    label-position="right"
    size="mini"
    :rules="isCreate ? createRules : updateRules"
    :model="data"
    label-width="80px"
  >
    <el-row>
      <el-col :span="11">
        <el-form-item
          label="帐号"
          prop="username"
        >
          <el-input
            v-model="data.username"
            :disabled="!isCreate"
          />
        </el-form-item>
      </el-col>

      <el-col
        :span="11"
        :offset="1"
      >
        <el-form-item
          label="姓名"
          prop="cnname"
        >
          <el-input v-model="data.cnname" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item
          label="部门"
          prop="depid"
        >
          <el-select
            v-model="data.depid.id"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in depList"
              :key="index"
              :label="item.deptname"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col
        :span="11"
        :offset="1"
      >
        <el-form-item
          label="用户级别"
          prop="llevel"
        >
          <el-select
            v-model="data.llevel"
            placeholder="请选择"
          >
            <el-option
              label="普通员工"
              :value="1"
            />
            <el-option
              label="部门级系统管理员"
              :value="2"
            />
            <el-option
              label="公司级系统管理员"
              :value="3"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            v-model="data.password"
            type="password"
          />
        </el-form-item>
      </el-col>

      <el-col
        :span="11"
        :offset="1"
      >
        <el-form-item
          label="重复密码"
          prop="repassword"
        >
          <el-input
            v-model="data.repassword"
            type="password"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item
          label="手机号"
          prop="mobile"
        >
          <el-input v-model="data.mobile" />
        </el-form-item>
      </el-col>

      <el-col
        :span="11"
        :offset="1"
      >
        <el-form-item
          label="QQ"
          prop="QQ"
        >
          <el-input v-model="data.QQ" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item
          label="微信"
          prop="wxcode"
        >
          <el-input v-model="data.wxcode" />
        </el-form-item>
      </el-col>

      <el-col
        :span="11"
        :offset="1"
      >
        <el-form-item
          label="备注"
          prop="remark"
        >
          <el-input v-model="data.remark" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getUserDeps } from "@/api/system-manage/user";
import { OperationType, recordOperateLogFunc } from "@/api/log";

const recordOperateLog = recordOperateLogFunc("系统管理", "用户管理");

export default {
  props: {
    // 表单
    data: {
      type: Object,
      required: true,
    },
    // 是否是新增表单
    isCreate: {
      type: Boolean,
      required: false,
      default: () => false,
    },
  },
  data() {
    const checkPassSame = (rule, value, callback) => {
      if (value !== this.data.password) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };

    return {
      depList: [],
      // 新增表单规则
      createRules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        cnname: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        depid: [{ required: true, message: "部门不能为空", trigger: "blur" }],
        llevel: [
          { required: true, message: "用户级别不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        repassword: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { validator: checkPassSame, trigger: "blur" },
        ],
      },

      // 修改表单规则
      updateRules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        cnname: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        depid: [{ required: true, message: "部门不能为空", trigger: "blur" }],
        llevel: [
          { required: true, message: "用户级别不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    getUserDeps().then(({ detail }) => {
      this.$data.depList = detail;
    });
    recordOperateLog(OperationType.Select, "部门");
  },
  methods: {
    submit() {
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          this.$emit("submit");
        }
      });
    },
  },
};
</script>
